<template name="myPage">
	<view class="page">
		<view class="bg"></view>
		<view class="main">
			<view class="user">
				<view class="top">
					<open-data type="userAvatarUrl" class="avatar"></open-data>
					<!-- <image :src="user_avatar" class="avatar" ></image> -->
					<view class="profile">
						<view class="name"><open-data type="userNickName"></open-data></view>
						<view class="sign">知识改变命运！</view>
					</view>
				</view>
				<view class="bottom">
					<view class="inGS">
						<view class="value">{{useCount}} Days</view>
						<view class="key">累计使用</view>
					</view>
					<view class="distanceGraduation">
						<view class="value">{{sumCount}} Item</view>
						<view class="key">条记录</view>
					</view>
				</view>
			</view>
			<view class="cardList">
				<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">

					<view class="cu-item arrow">
						<button class="content" open-type='share' style="text-align:left;">
							<text class="cuIcon-forwardfill text-green"></text>
							<text class="text-grey">分享好友</text>
						</button>
					</view>

					<view class="cu-item arrow">
						<navigator class="content" url="delete" hover-class="none">
							<text class="cuIcon-deletefill text-red"></text>
							<text class="text-grey">回收管理</text>
						</navigator>
					</view>

					<view class="cu-item arrow">
						<navigator class="content" url="update" hover-class="none">
							<text class="cuIcon-edit text-blue"></text>
							<text class="text-grey">更新日志</text>
						</navigator>
					</view>

					<view class="cu-item arrow">
						<navigator class="content" url="feedback" hover-class="none">
							<text class="cuIcon-writefill text-cyan"></text>
							<text class="text-grey">意见反馈</text>
						</navigator>
					</view>

					<view class="cu-item arrow">
						<navigator class="content" url="about" hover-class="none">
							<text class="cuIcon-infofill text-DarkRed"></text>
							<text class="text-grey">关于我们</text>
						</navigator>
					</view>

				</view>
			</view>
		</view>
		<baseTabar></baseTabar>
	</view>
</template>

<script>
	export default {
		name: "myPage",
		data() {
			return {
				useCount: "100",
				sumCount: "100"
			}
		},
		methods: {

		},
		onLoad: function() {
			var that = this;
			uni.request({
				// url:'http://47.94.164.187:9001/api/content/list/',
				url: 'http://127.0.0.1:9001/api/user/get_info',
				method: 'GET',
				header: {
					token: uni.getStorageSync('token')
				},
				success: (res) => {
					// console.log(res)
					that.useCount = res.data.data.useCount;
					that.sumCount = res.data.data.sumCount;
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 750rpx;
		// height: 1334rpx;
		height: 100%;
		background-color: #f5f5f5;

		.bg {
			height: 500rpx;
			background: linear-gradient(-15deg, #f5f5f5 196rpx, transparent 0),
				url(http://yun.hiai.top/ke_my_index.jpg);
			background-size: cover;
			background-repeat: no-repeat;
		}

		.main {
			position: absolute;
			width: 100%;
			top: 276rpx;
			// height: 100%;

			.user {
				background-color: white;
				margin: 0 36rpx;
				border-radius: 20rpx;
				padding: 30rpx;
				height: 240rpx;

				.top {
					display: flex;
					align-items: center;

					.avatar {
						display: block;
						/* 设置 overflow 为 hidden 才能设置圆角 */
						overflow: hidden;
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
						margin-right: 30rpx;
						transform: translateY(-70rpx);
					}

					.profile {
						transform: translateY(-40rpx);

						.name {
							margin-bottom: 20rpx;
							font-weight: bold;
							font-size: 0.9rem;
						}

						.sign {
							color: #b3bdbf;
						}
					}
				}

				.bottom {
					transform: translateY(-50rpx);
					display: flex;
					justify-content: space-around;

					.inGS {
						.value {
							font-weight: bold;
						}

						.key {
							color: #b3bdbf;
						}
					}

					.distanceGraduation {
						.value {
							font-weight: bold;
						}

						.key {
							color: #b3bdbf;
						}
					}
				}
			}
		}
	}
</style>
